<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
	  xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:f="http://java.sun.com/jsf/core"
	  xmlns:t="http://myfaces.apache.org/tomahawk"
	  xmlns:a4j="http://richfaces.org/a4j"
	  xmlns:rich="http://richfaces.org/rich"
	  xmlns:owl="http://onto.agh.edu.pl/owl">

	<ui:composition template="templates/body_template.xhtml">

		<ui:define name="css">
			<link type="text/css" rel="stylesheet" href="css/graph/hypertree.css" />
			<link type="text/css" rel="stylesheet" href="css/onto.css" />
		</ui:define>
			
		<ui:define name="scripts">

			<script language="javascript" type="text/javascript" src="scripts/graph/excanvas.js"/>
			<script language="javascript" type="text/javascript" src="scripts/graph/core.js"/>
			<script language="javascript" type="text/javascript" src="scripts/graph/canvas.js"/>
			<script language="javascript" type="text/javascript" src="scripts/graph/hypertree.js"/>
			<script language="javascript" type="text/javascript" src="scripts/graph/graph.js"/>


		</ui:define>

		<ui:define name="page_title">
			Ontology Browser
		</ui:define>

		<ui:define name="hdr_logo">
			<!-- TODO dodac logo agh  albo iisg -->
		<!--<img id="logo" width="54" height="30"  src="logo.png"/>-->
		</ui:define>

		<ui:define name="hdr_title">
			<a4j:form>
				<h:inputText value="#{browserMBean.searchValue}" action="#{browserMBean.searchAction}" styleClass="search"/>
				<h:commandLink  styleClass="search"/>
			</a4j:form>
		</ui:define>

		<ui:define name="hdr_info" >
			<h:form>
				jestes zalogowany jako <b>#{userMBean.login}</b>
				| <h:commandLink value="Wyloguj" action="#{userMBean.logoutAction}"/>
				<div id="clock">.</div>
			</h:form>

		</ui:define>

		<ui:define name="navcenter">
		</ui:define>


		<ui:define name="navright">
			<a4j:form id="visButton">
				<a4j:commandLink value="Hide Graph" styleClass="on" reRender="visButton, graph"
					 action="#{browserMBean.changeGraphViewAction}" rendered="#{browserMBean.renderGraphView == 2}">
					<b>js</b>
				</a4j:commandLink>
				<a4j:commandLink value="Show Graph" styleClass="off" reRender="visButton, graph"
					 action="#{browserMBean.changeGraphViewAction}" rendered="#{browserMBean.renderGraphView == 1}">
					<b>rich</b>
				</a4j:commandLink>

				<a4j:commandLink value="Show Graph" styleClass="off" reRender="visButton, graph"
					 action="#{browserMBean.changeGraphViewAction}" rendered="#{browserMBean.renderGraphView == 0}">
					<b>off</b>
				</a4j:commandLink>
			</a4j:form>
		</ui:define>


		<ui:define name="content">
			<a4j:form>
				<div id="left">

					<h:outputText value="Individuals"/>
					<br/>
					<br/>

					<a4j:outputPanel id="ontoInstances" >
						TAGI<h:inputText value=""/><br/>
						ADRES BAZY<h:inputText value=""/><br/>
						UZYTKOWNIK<h:inputText value=""/><br/>
						HASLO<h:inputText value=""/><br/>
						HOST<h:inputText value=""/><br/>
						SQL_QUERY<h:inputText/>
					</a4j:outputPanel>

				</div>

				<div id="center" style="">
					<a4j:outputPanel layout="block" id="ontoItem">
						<h:outputText value="#{browserMBean.itemType}"/>

						<t:div rendered="#{browserMBean.selectedOntoItem != null and browserMBean.itemType==1}">
							<owl:instance bean="#{browserMBean.selectedOntoItem}"/>
						</t:div>

						<t:div rendered="#{browserMBean.selectedOntoItem != null and browserMBean.itemType== 0}">
							<owl:class bean="#{browserMBean.selectedOntoItem}"/>
						</t:div>

						<t:div rendered="#{browserMBean.selectedOntoItem != null and (browserMBean.itemType== 2 or browserMBean.itemType== 3)}">
							<owl:property bean="#{browserMBean.selectedOntoItem}"/>
						</t:div>

						<t:div rendered="#{browserMBean.selectedOntoItem == null}">
							Nothing current selected
						</t:div>

						<a4j:commandLink value="Show Sources" action="#{browserMBean.updateViewAction}" reRender="ontoInstances"/>
					</a4j:outputPanel>
				</div>


				<t:div id="graph" styleClass="graph">
					<h:outputText rendered="#{browserMBean.renderGraphView == 2}">

						<div id="infovis">
						<div id="label_container"/>
						<div id="log"/>

						</div>

						<script type="text/javascript">
							init_graph();
						</script>
					</h:outputText>

					<h:outputText rendered="#{browserMBean.renderGraphView == 1}">

						<rich:tree id="treeRich" value="#{browserMBean.richTree}" var="item" nodeFace="#{item.type}" reRender="graph">
							<rich:treeNode type="unknown" iconLeaf="/images/tree_test/disc.gif" icon="/images/tree_test/disc.gif">
								<h:outputText value="#{item.data}" onclick="ajaxWrapper('#{item.id}')"/>
							</rich:treeNode>

							<rich:treeNode type="dictionary" iconLeaf="/images/tree_test/singer.gif" icon="/images/tree_test/singer.gif">
								<h:outputText value="#{item.data}" onclick="ajaxWrapper('#{item.id}')"/>
							</rich:treeNode>

							<rich:treeNode type="class" iconLeaf="/images/tree_test/song.gif" icon="/images/tree_test/song.gif" >
								<h:outputText value="#{item.data}" onclick="ajaxWrapper('#{item.id}')"/>
							</rich:treeNode>
						</rich:tree>

					</h:outputText>
				</t:div>
				<a4j:jsFunction name="ajaxWrapper" action="#{browserMBean.updateViewAction}" reRender="ontoInstances, ontoItem">
					<a4j:actionparam assignTo="#{browserMBean.selectedClassNodeURI}" name="selectedClassNodeURI"/>
				</a4j:jsFunction>

			</a4j:form>
		</ui:define>

		<ui:define name="pages">
			<h:form id="links">
				<h:commandLink id="prev"  styleClass="a_prev_on" value=". ."/>
				<h:commandLink id="A" value="A" />|
				<h:commandLink id="B" value="B" />|
				<h:commandLink id="C" value="C" />|
				<h:commandLink id="D" value="D" />
				<h:commandLink id="next"  styleClass="a_next_on" value=". ."/>
			</h:form>
		</ui:define>

	</ui:composition>
</html>
